<template>
  <div>
    <!-- 页面代码-->
    <!-- v-bind="{'close-plan':true,'close-enter':true,'close-advanced':true}" -->
    <div>
      <div class="">
        <div>
          <searchBar ref="searchbar" @searchEvent="searchFn" v-model="searchform">
            <template #header> 左侧插槽 </template>

            <template #body>
              <el-button type="primary"> 中间插槽 </el-button>
            </template>

            <template #footer>
              <el-button type="primary"> 右侧插槽 </el-button>
            </template>

            <!-- 高级搜索弹出框 插槽-->

            <template #searchForm>
              <!--  高级搜索弹出框内容-->
              <div class="modal-content">
                <div class="modal-title">高级搜索</div>

                <div class="modal—body">
                  <el-scrollbar height="100%">
                    <div class="scrollbar-content">
                      <!-- 已选参数 组件-->
                      <selectedParams v-model="searchform" label="label" val="value" option-key="options"></selectedParams>

                      <!-- 表单 -->
                      <el-form :model="searchform" label-position="top" ref="ruleFormRef">
                        <merakColapse :is-active="false">
                          <template #header>基本信息</template>

                          <el-row :gutter="20">
                            <el-col :span="12">
                              <el-form-item :label="searchform.org_company.label">
                                <el-select
                                  style="width: 100%"
                                  v-model="searchform.org_company.value"
                                  placeholder="请选择..."
                                  clearable
                                >
                                  <el-option
                                    v-for="option in searchform.org_company.options"
                                    :key="option"
                                    :label="option.label"
                                    :value="option.value"
                                  />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item :label="searchform.org_department.label">
                                <el-select
                                  style="width: 100%"
                                  v-model="searchform.org_department.value"
                                  placeholder="请选择..."
                                  clearable
                                >
                                  <el-option
                                    v-for="option in searchform.org_department.options"
                                    :label="option.label"
                                    :value="option.value"
                                  />
                                </el-select>
                              </el-form-item>
                            </el-col>
                          </el-row>

                          <el-row :gutter="20">
                            <el-col :span="12">
                              <el-form-item :label="searchform.job_nature.label">
                                <el-select
                                  style="width: 100%"
                                  v-model="searchform.job_nature.value"
                                  placeholder="请选择..."
                                  clearable
                                >
                                  <el-option
                                    :label="option.label"
                                    :value="option.value"
                                    v-for="option in searchform.job_nature.options"
                                    :key="option"
                                  />
                                </el-select>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <el-form-item :label="searchform.status.label">
                                <el-select
                                  style="width: 100%"
                                  v-model="searchform.status.value"
                                  placeholder="请选择..."
                                  clearable
                                >
                                  <el-option
                                    :label="option.label"
                                    :value="option.value"
                                    v-for="option in searchform.status.options"
                                    :key="option"
                                  />
                                </el-select>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </merakColapse>
                      </el-form>
                      <!-- 表单 -->
                    </div>
                  </el-scrollbar>
                </div>
                <div class="modal-footer">
                  <el-button type="default" @click="closeModal">取消</el-button>
                  <el-button type="primary" @click="submitForm(ruleFormRef)">搜索</el-button>
                  <el-button type="success" @click="showPlanModal">保存搜索方案</el-button>
                </div>
              </div>
              <!--  高级搜索弹出框内容-->
            </template>

            <!-- /高级搜索弹出框 插槽-->
          </searchBar>
        </div>
      </div>
    </div>
    <!-- 页面代码 -->
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htmlCode }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
    <ol>
      <li>快捷搜索、搜索方案、高级搜索 三者默认无任何关联参数关系，唯一性存在，覆盖另外两者</li>
      <li>更换header插槽和搜索模块位置，自行使用 flex 布局调换位置</li>
      <li>Props参数：</li>
      <li class="el-table__inner-wrapper">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name1" label="属性" width="200" />
          <el-table-column prop="name2" label="说明" width="260" />
          <el-table-column prop="name3" label="数据结构、默认值" />
          <el-table-column prop="name4" label="" width="80" />
        </el-table>
      </li>
    </ol>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, reactive } from "vue";
import { MoreFilled } from "@element-plus/icons-vue";
import { demoProps } from "@/stores/modules/merakDemo";
import dropWrap from "../dropWrap.vue";

import searchBar from "@/components/SearchBar";
import merakColapse from "@/components/merakColapse/index.vue";
import selectedParams from "@/components/SearchBar/components/selectedParams.vue";

import Prism from "prismjs";
import "../prism.css";

let htmlCode: string = `

          <serachBar 
             custom-class="myclass"
            :search-value="search_val"
            :plan-options="serachPlanOption"
            :plan-value="serachPlanValue"
            :placeholder="placeholder"
            @searchEvent="searchFn"
             >

            <template #header> 左侧插槽 </template>

            <template #body>
              <el-button type="primary"> 中间插槽 </el-button>
            </template>

            <template #footer>
              <el-button type="primary"> 右侧插槽 </el-button>
            </template>

          </serachBar>


`;

let tableData: any = [
  {
    name1: "form-data",
    name2: "高级搜搜表单的 Form 数据",
    name3:` const searchform = reactive({org_company: {label: "隶属公司",key: "", options: []},org_department: {label: "部门",key: "",options: []},"`,
    name4: "必填"
  },
  {
    name1: "custom-class",
    name2: "自定义类名",
    name3: "type:string",
    name4: "非必须"
  },
  {
    name1: "placeholder",
    name2: "快速搜索框placeholder值",
    name3: "type:string",
    name4: "非必须"
  },
  {
    name1: "search-value",
    name2: "快速搜索框value值",
    name3: "type:string",
    name4: "非必须"
  },
  {
    name1: "plan-options",
    name2: "搜索方案 下拉数据",
    name3: '[{label:"方案一",value: "planId"}] ; label:string ;value:string',
    name4: "非必须"
  },
  {
    name1: "plan-value",
    name2: "搜索方案当前选中结果",
    name3: "type:string",
    name4: "非必须"
  },
  {
    name1: "@searchEvent",
    name2: "快捷搜索、搜索方案、高级搜索 触发监听事件",
    name3: `触发返回值：{search: 'okok', plan: 'Option2', action: 'plan'} ; action:当前触发对象(plan:方案;enter:输入框)`,
    name4: "必须"
  },
  {
    name1: "planName",
    name2: "自定义计划方案返回的key",
    name3: `默认值:plan`,
    name4: "非必须"
  },
  {
    name1: "searchName",
    name2: "自定义快速搜索返回的key",
    name3: `默认值:search`,
    name4: "非必须"
  },
  {
    name1: "plan-key",
    name2: "传给保存搜索方案弹出框使用，用来告诉保存搜索方案组件,form表单绑定的key是谁。",
    name3: `默认值:key`,
    name4: "非必须"
  },
  {
    name1: "close-enter",
    name2: "关闭快速搜索",
    name3: `默认值:false`,
    name4: "非必须"
  },
  {
    name1: "close-plan",
    name2: "关闭搜索方案",
    name3: `默认值:false`,
    name4: "非必须"
  },
  {
    name1: "close-advanced",
    name2: "关闭高级搜索",
    name3: `默认值:false`,
    name4: "非必须"
  },
  {
    name1: "modal-show",
    name2: "高级搜索modal 默认打开状态",
    name3: `默认值:false`,
    name4: "非必须"
  }
];


 


//高级搜索模态
const searchbar = ref();


// 高级搜索表单
const ruleFormRef = ref<FormInstance>();
const searchform = ref({
  org_company: {
    label: "公司",
    value: "",
    type: "select",
    options: [
      { label: "北京企发", value: 1 },
      { label: "米格速达", value: 2 },
      { label: "新世纪农业", value: 3 }
    ]
  },
  org_department: {
    label: "部门",
    value: "",
    type: "select",
    options: [
      { label: "物流", value: 1 },
      { label: "研发", value: 2 },
      { label: "销售", value: 3 }
    ]
  },
  job_nature: {
    label: "工作性质",
    value: "",
    type: "select",
    options: [
      { label: "全职", value: 1 },
      { label: "兼职", value: 2 }
    ]
  },
  status: {
    label: "状态",
    value: "",
    type: "select",
    options: [
      { label: "在职", value: 1 },
      { label: "试用期", value: 2 }
    ]
  }
});




 
// 获取高级搜索方案
const queryFilterOptions = async data => {
  // searchbar.value.getPlanList(data.table_id);
  console.log(searchbar.value)
  searchbar.value.getPlanList("contracts-signed-table-id");
  // 初始化接口需要传入队列 loading 暴露的 id
};





//触发了快速搜索或者搜索方案
const searchBarPost = params => {
  let postParams = { ...params.params, ...{ search: params.search } };
  state.statParams = postParams;
};

//点击取消按钮关闭高级搜索模态框
const closeModal = () => {
  searchbar.value.modalHide();
  searchbar.value.clear();
};

//打开搜索方案弹出
const showPlanModal = () => {
  searchbar.value.showPlanModal();
};

//搜索表单提交
const submitForm = async (formEl: FormInstance | undefined) => {
  state.statParams = { ...searchbar.value.formParams("value") };
  searchbar.value.clear();
  searchbar.value.clear();
  searchbar.value.modalHide();
};

/* 生命周期 */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
  queryFilterOptions();
});
</script>
<style lang="scss" scoped>
.demo_table td {
  word-wrap: break-word;
}
</style>